<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
  <TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="demoStyle/demo.css" type="text/css">
  <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="jquery-1.4.2.js"></script>
  <script type="text/javascript" src="jquery-ztree-2.5.js"></script>
  <script type="text/javascript" src="asyncData/demoData.js"></script>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
	var zTree1;
	var setting;

		setting = {
			checkable: true,
			checkStyle: "radio",
			checkRadioType: "level",
			callback: {
				change:	zTreeOnChange
			}
		};

	$(document).ready(function(){
		refreshTree();
	});


	function zTreeOnChange(event, treeId, treeNode) {
		getCheckedNodesLength();
	}
	
	function getRadioType() {
		var level = $("#level").attr("checked")? "level":"";
		var all = $("#all").attr("checked")? "all":"";
		
		return level + all;
	}
	
	function refreshTree() {
		setting.checkRadioType = getRadioType();
		zTree1 = $("#treeDemo").zTree(setting, zNodes);
		$("#checkRadioTypeCode").html(setting.checkRadioType);
		getCheckedNodesLength();
	}

	function getCheckedNodesLength() {
		var tmp = zTree1.getCheckedNodes(true);
		$("#checkedNum").html(tmp.length);
	}

  //-->
  </SCRIPT>
 </HEAD>

<BODY>
<center class="headTitle">Radio&nbsp;&nbsp;演示</center>
<TABLE border=0 width="700" class="tb1">
	<TR>
		<TD width=340px align=center valign=top>
		<div class="zTreeDemoBackground">
			<ul id="treeDemo" class="tree"></ul>
		</div>		
		</TD>
		<TD width=360px align=left valign=top>
		<div class="demoContent">
			<li class="title focus">
				<button class="ico star" onfocus="this.blur();"></button>Radio 分组类型配置
				<ul class="remark">——修改以下配置，点击 Tree 的 Radio，看看变化</ul>
				<ul>
					<INPUT TYPE="radio" id="level" NAME="radioType" checked onclick="refreshTree();">在每一级内进行进行分组控制
				</ul>
				<ul>
					<INPUT TYPE="radio" id="all" NAME="radioType" onclick="refreshTree();">在整个 Tree 内进行分组控制
				</ul>
				<ul class="event">
					<li>&nbsp;setting.checkable = <a id="checkableCode">true</a>;</li>
					<li>&nbsp;setting.checkStyle = "<a id="checkableCode">radio</a>";</li>
					<li>&nbsp;setting.checkRadioType = "<a id="checkRadioTypeCode">level</a>";</li>
					<li>&nbsp;</li>
					<li>&nbsp;被选择的节点共 <a id="checkedNum">0</a> 个</li>
				</ul>
			</li>
			<li class="title focus">
				<button class="ico books" onfocus="this.blur();"></button>Radio 状态说明
				<ul class="remark">
					<button type="BUTTON" class="treeButton radio_false_full"></button>当前节点没有被选择；
					鼠标移到该节点上显示为：<button type="BUTTON" class="treeButton radio_false_full_focus"></button><br/>
					&nbsp;&nbsp;&nbsp;<font style="color:#82ff65">如果是父节点，则没有被选择的子节点。</font>
				</ul>
				<ul class="remark">
					<button type="BUTTON" class="treeButton radio_false_part"></button>当前节点没有被选择；
					鼠标移到该节点上显示为：<button type="BUTTON" class="treeButton radio_false_part_focus"></button><br/>
					&nbsp;&nbsp;&nbsp;<font style="color:#fb7878">存在被选择的子节点（只有父节点存在此状态）。</font>
				</ul>
				<ul class="remark">
					<button type="BUTTON" class="treeButton radio_true_full"></button>当前节点被选择；
					鼠标移到该节点上显示为：<button type="BUTTON" class="treeButton radio_true_full_focus"></button><br/>
					&nbsp;&nbsp;&nbsp;<font style="color:#82ff65">如果是父节点，则没有被选择的子节点。</font>
				</ul>
				<ul class="remark">
					<button type="BUTTON" class="treeButton radio_true_part"></button>当前节点被选择；
					鼠标移到该节点上显示为：<button type="BUTTON" class="treeButton radio_true_part_focus"></button><br/>
					&nbsp;&nbsp;&nbsp;<font style="color:#fb7878">且有被选择的子节点（只有父节点存在此状态）。</font>
				</ul>
			</li>
		</div>	
		</TD>
	</TR>
</TABLE>
 </BODY>
</HTML>
